
import React, { Component } from 'react';

import {
    StyleSheet,
    View,
    Image
} from 'react-native';

const Dimensions = require('Dimensions');
const { width } = Dimensions.get('window');

import Swiper from 'react-native-swiper';

var sliderImgs = [
    'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png',
    'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
    'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
];

export default class Slider extends Component {
    render() {
        return (
            <Swiper
                style={styles.sliderContainer}
                showsButtons={false}
                loop={true}
                dotStyle={styles.dotStyle}
                activeDotStyle={styles.activeDotStyle}
                paginationStyle={{ bottom: 5 }}
            >
                <View style={styles.slideItem}>
                    <Image style={[styles.sliderImage]} source={{ uri: sliderImgs[0] }}></Image>
                </View>
                <View style={styles.slideItem}>
                    <Image style={[styles.sliderImage]} source={{ uri: sliderImgs[1] }}></Image>
                </View>
                <View style={styles.slideItem}>
                    <Image style={[styles.sliderImage]} source={{ uri: sliderImgs[2] }}></Image>
                </View>
            </Swiper>
        )
    }
}

const styles = StyleSheet.create({
    sliderContainer: {
        // flex: 1,
        height: width / 640 * 128,
        backgroundColor: 'red'
    },
    slideItem: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: width,
        height: width / 640 * 128
    },
    sliderImage: {
        flex: 1,
        width: width,
        height: width / 640 * 128
    },
    dotStyle: {
        width: 6,
        height: 6,
        borderRadius: 3,
        backgroundColor: 'rgba(255, 255, 255,.6)',
    },
    activeDotStyle: {
        backgroundColor: '#fff',
        width: 6,
        height: 6,
        borderRadius: 3,
    }
});